@(game : at.ac.tuwien.big.we14.lab2.api.QuizGame, name : String)
@import play.i18n._
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Business Informatics Group Quiz</title>
        <link rel="stylesheet" type="text/css" href="@routes.Assets.at("/stylesheets/main.css")" />
        <script src="@routes.Assets.at("/javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
        <script src="@routes.Assets.at("/javascripts/framework.js")" type="text/javascript"></script>
    </head>
    <body id="questionpage">
        <a class="accessibility" href="#question">Zur Frage springen</a>
        <header role="banner" aria-labelledby="mainheading"><h1 id="mainheading"><span class="accessibility">Business Informatics Group</span> Quiz</h1></header>
        <nav role="navigation" aria-labelledby="navheading">
            <h2 id="navheading" class="accessibility">@Messages.get("navigation")</h2>
            <ul>
                <li><a id="logoutlink" title="Klicke hier um dich abzumelden" href="#" accesskey="l">@Messages.get("logout")</a></li>
            </ul>
        </nav>
        
        <!-- round info -->
        <section role="main">
            <section id="roundinfo" aria-labelledby="roundinfoheading">
                <h2 id="roundinfoheading" class="accessibility">Spielerinformationen</h2>
                <div id="player1info">
                    <span id="player1name">@name</span>
                    <ul class="playerroundsummary">
                    	@for(i <- 0 until 3) {
                    		@if(game.getCurrentRound().getAnswer(i, game.getPlayers().get(0))==null) {
                    			<li><span class="accessibility">Frage @i:</span><span id="player1answer@i" class="unknown">@Messages.get("roundover.unkonwn")</span></li>	
                    		}else{
                    			@if(game.getCurrentRound().getAnswer(i, game.getPlayers().get(0)).isCorrect()) {
		                     		<li><span class="accessibility">Frage @i:</span><span id="player1answer@i" class="correct">@Messages.get("roundover.correct")</span></li>                    			
                    			}else {
                    				<li><span class="accessibility">Frage @i:</span><span id="player1answer@i" class="incorrect">@Messages.get("roundover.wrong")</span></li>		
                    			}
                    		}
                    	}
                    </ul>
                </div>
                <div id="player2info">
                    <span id="player2name">@game.getPlayers().get(1).getName()</span>
                    <ul class="playerroundsummary">
                        @for(i <- 0 until 3) {
                    		@if(game.getCurrentRound().getAnswer(i, game.getPlayers().get(1))==null) {
                    			<li><span class="accessibility">Frage @i:</span><span id="player1answer@i" class="unknown">@Messages.get("roundover.unkonwn")</span></li>	
                    		}else{
                    			@if(game.getCurrentRound().getAnswer(i, game.getPlayers().get(1)).isCorrect()) {
		                     		<li><span class="accessibility">Frage @i:</span><span id="player1answer@i" class="correct">@Messages.get("roundover.correct")</span></li>                    			
                    			}else {
                    				<li><span class="accessibility">Frage @i:</span><span id="player1answer@i" class="incorrect">@Messages.get("roundover.wrong")</span></li>		
                    			}
                    		}
                    	}
                    </ul>
                </div>
                <div id="currentcategory"><span class="accessibility">Kategorie:</span> @game.getCurrentRound().getCurrentQuestion(game.getPlayers().get(0)).getCategory().getName()</div>
            </section>
            
            <!-- Question -->
            <section id="question" aria-labelledby="questionheading">
                
                <!--form id="questionform" action="@routes.BigQuiz.doGame" method="post"-->
                @helper.form(action = routes.BigQuiz.doGame()) {
                    <h2 id="questionheading" class="accessibility">Frage</h2>
                    <p id="questiontext">@game.getCurrentRound().getCurrentQuestion(game.getPlayers().get(0)).getText()</p>
                    <ul id="answers">
                    	@for( (choice, index) <- game.getCurrentRound().getCurrentQuestion(game.getPlayers().get(0)).getAllChoices().zipWithIndex ) {
                        <li><input id="option@index" value="@choice.getText()" name="answern@index" type="checkbox"/><label for="option@index">@choice.getText()</label></li>
                        }
                    </ul>
                    <input id="timeleftvalue" type="hidden" value="100" name="timeleft" />
                    <input id="next" type="submit" value="weiter" accesskey="s"/>
                }
                <!--/form-->
            </section>
            
            <section id="timer" aria-labelledby="timerheading">
                <h2 id="timerheading" class="accessibility">Timer</h2>
                <p><span id="timeleftlabel">@Messages.get("quiz.remainingtime"):</span> <time id="timeleft">00:@game.getCurrentRound().getCurrentQuestion(game.getPlayers().get(0)).getMaxTime()</time></p>
                <meter id="timermeter" min="0" low="20" value="100" max="100"/>
            </section>

            <section id="lastgame">
                <p>@Messages.get("quiz.lastgame"): Nie</p>
            </section>
        </section>

        <!-- footer -->
        <footer role="contentinfo">© 2014 BIG Quiz</footer>
        
        <script type="text/javascript">
            //<![CDATA[
            
            // initialize time
            $(document).ready(function(){
		        var maxtime = @game.getCurrentRound().getCurrentQuestion(game.getPlayers().get(0)).getMaxTime();
		        var hiddenInput = $("#timeleftvalue");
		        var meter = $("#timer meter");
		        var timeleft = $("#timeleft");
		        
		        hiddenInput.val(maxtime);
		        meter.val(maxtime);
		        meter.attr('max', maxtime);
		        meter.attr('low', maxtime/100*20);
		        timeleft.text(secToMMSS(maxtime));
		        
		        // set last game
		        if(supportsLocalStorage()){
		            var lastGameMillis = parseInt(localStorage['lastGame'])
		            if(!isNaN(parseInt(localStorage['lastGame']))){
		                var lastGame = new Date(lastGameMillis);
		            	$("#lastgame p").replaceWith('<p>Letztes Spiel: <time datetime="'
		            			+ lastGame.toUTCString()
		            			+ '">'
		            			+ lastGame.toLocaleString()
		            			+ '</time></p>')
		            }
               }
            });
            
            // update time
            function timeStep() {
                var hiddenInput = $("#timeleftvalue");
                var meter = $("#timer meter");
                var timeleft = $("#timeleft");
                
                var value = $("#timeleftvalue").val();
                if(value > 0) {
                    value = value - 1;   
                }
                
                hiddenInput.val(value);
                meter.val(value);
                timeleft.text(secToMMSS(value));
                
                if(value <= 0) {
                    $('#questionform').submit();
                }
            }
            
            window.setInterval(timeStep, 1000);
            
            //]]>
        </script>
    </body>
</html>
